<link rel="stylesheet" href="/start/layui/css/index.css">
<style>
    .sanbut {
        float: right;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    
    .layui-btn-normal {
        background-color: #FFFFFF;
        color: black;
        border: 1px solid #DCDFE6;
    }
    
    .box {
        width: 100%;
        margin: 0 auto;
        /* margin-top: 50px; */
        box-shadow: 0px 2px 6px 0px rgba(6, 185, 145, 0.2);
    }
    
    .bb {
        background-color: #06B991;
        min-width: 94px;
    }
    
    .layui-card:last-child {
        width: 100%;
        /* min-height: 800px; */
        margin: 0 auto;
        margin-top: 32px;
        border-radius: 8px;
        padding: 10px 15px;
        box-sizing: border-box;
    }
    
    .aa {
        border-radius: 8px;
        background-color: #F5F5F5;
        padding-left: 10px;
    }
    
    .layui-form-select .layui-input {
        border-radius: 8px;
        background-color: #F5F5F5;
    }
    
    .layui-input-inline {
        width: 250px !important;
    }
</style>

<div class="layui-fluid">
    <div class="bg one">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-form layui-card-header layuiadmin-card-header-auto" lay-filter="layadmin-userfront-formlist">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <div class="layui-form-item">
                                <div class="layui-input-inline">
                                    <select name="interest-search" id="soso" lay-filter="interest-search" lay-search style="background-color: #F5F5F5;">
							    </select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <div class="layui-form-item">
                                <div class="layui-input-inline">
                                    <select name="interest-searchname" id="sosoname" lay-filter="interest-searchname" lay-search style="background-color: #F5F5F5;">
							    </select>
                                </div>
                            </div>
                        </div>
                        <div class="sanbut">
                            <!-- <button class="layui-btntm layuiadmin-btn-useradmin" lay-submit id="uploadExcel">导入</button> -->
                            <button class="layui-btntm layuiadmin-btn-useradmin" lay-submit lay-filter="uploadImg">导出</button>
                            <button class="layui-btn layuiadmin-btn-admin bb" style="float: right;margin-left: 10px;" data-type="add" id="add">新增</button>
                        </div>

                    </div>
                    <div style="padding-bottom: 10px;">
                    </div>
                    <div class="box">
                        <table class="layui-hide" lay-even lay-skin="nob" id="table-instance" lay-filter="table-instance"></table>
                    </div>


                    <script type="text/html" id="table-useradmin-admin">
                        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-2"></i>编辑</a>
                        <a class="layui-btn layui-btn-normal layui-btn-xs" id="chakan" lay-event="chakan">详情</a>
                        <a class="layui-btn layui-bg-red layui-btn-xs" lay-event="del">删除</a>
                    </script>

                </div>


            </div>
            <div style="text-align: center;" id="demo5"></div>
        </div>
    </div>
    <script>
        layui.use(['useradmin'], layui.factory('useradmin')).use(['admin', 'useradmin', 'table', "laypage", 'laydate', 'upload'], function() {
            var $ = layui.$,
                admin = layui.admin,
                view = layui.view,
                setter = layui.setter,
                table = layui.table,
                laydate = layui.laydate,
                upload = layui.upload,
                laypage = layui.laypage,
                form = layui.form;

            // form.render(null, 'layadmin-userfront-formlist');
            //监听搜索
            form.on('submit(LAY-user-front-search)', function(data) {
                var field = data.field;
                //执行重载
                table.reload('table-instance', {
                    where: field
                });
            });

            //事件
            var active = {};
            // 因为你获取搜索框的数据和列表是一个接口，列表又是分页的，所以这里咱们一次性获取所有的数据方便写下拉框
            //导入
            upload.render({
                elem: '#uploadExcel',
                url: setter.request.baseUrl + "agv-info/upload",
                accept: 'file' //普通文件
                    ,
                multiple: true,
                done: function(res) {
                    layui.table.reload("table-instance");
                }
            });
            // 车辆编号数据接口
            admin.req({
                url: setter.request.baseUrl + "agv-info/query",
                data: JSON.stringify({
                    pageNum: 1,
                    pageSize: 100
                }),
                type: "POST",
                dataType: "json",
                contentType: "application/json;charset=UTF-8",
                done: function(res) {
                    console.log(res);
                    var html = "<option style='color:#e6e6e6;' value=''>请选择车辆编号</option>";
                    for (i = 0; i < res.info.length; i++) {
                        html += "<option value=" + res.info[i].agvId + ">" + res.info[i].agvId + "</option>"
                    }
                    $("#soso").empty().append(html)
                    form.render('select'); //需要渲染一下
                },
            });
            // 客户名数据接口
            admin.req({
                url: setter.request.baseUrl + "company/query",
                data: JSON.stringify({
                    pageNum: 1,
                    pageSize: 100
                }),
                type: "POST",
                dataType: "json",
                contentType: "application/json;charset=UTF-8",
                done: function(res) {
                    console.log(res);
                    var htmlname = "<option style='color:#e6e6e6;' value=''>请选择客户名</option>";
                    for (i = 0; i < res.info.length; i++) {
                        htmlname += "<option value=" + res.info[i].id + ">" + res.info[i].companyName + "</option>"
                    }
                    $("#sosoname").empty().append(htmlname)
                    form.render('select'); //需要渲染一下
                },

            });
            //事件下拉框数据发生变化时
            form.on('select(interest-search)', function(data) {
                // 调用搜索函数
                console.log(data)
                var data_val = data.value; //当前选中的数据
                if (data_val == "请选择车辆编号") {
                    // 查询所有的数据,不传的时候就是查询所有的
                    getData(1, '', '')
                } else {
                    getData(1, data_val, '')
                }
            });
            form.on('select(interest-searchname)', function(data) {
                // 调用搜索函数
                console.log(data)
                var data_valname = data.value; //当前选中的数据
                if (data_valname == "请选择客户名") {
                    // 查询所有的数据,不传的时候就是查询所有的
                    getData(1, '', '')
                } else {
                    getData(1, '', data_valname)
                }
            });
            getData(1, '', '')

            function getData(pageNum, agvId, companyName) {
                table.render({
                    //接口
                    elem: "#table-instance",
                    url: setter.request.baseUrl + "agv-info/query",
                    data: JSON.stringify({}),
                    where: {
                        pageNum: pageNum,
                        pageSize: 10,
                        agvId: parseInt(agvId),
                        companyId: parseInt(companyName)
                    },
                    contentType: "application/json;charset=UTF-8",
                    method: "POST",
                    response: {
                        statusName: "code",
                        statusCode: 0,
                        msgName: "msg",
                        countName: "totalCount",
                        dataName: "info",
                    },
                    page: false,
                    done: function(res, curr, count) {
                        console.log('yang', res.pageResponseDTO.total)
                        laypage.render({
                            elem: 'demo5',
                            count: res.pageResponseDTO.total,
                            curr: pageNum,
                            // limit: 10,
                            jump: function(obj, first) {
                                if (!first) {
                                    // that.shuju.pageNum = obj.curr;
                                    getData(obj.curr, '')
                                }
                            }
                        });
                        // 这里给搜索框赋值,有值的时候赋值
                        if (res.info.length != 0) {
                            console.log(res)
                        }
                    },
                    cols: [
                        [
                            // { field: "orderNumber;", title: "订单编号" },
                            {
                                field: "agvId",
                                title: "车辆编号",
                                align: "center",
                                width: "10%",
                            },
                            //  {
                            //     field: "ctrlId",
                            //     title: "控制板编号",
                            //     width: "10%",
                            //     align: "center",
                            // },
                            // {
                            //     field: "type",
                            //     title: "车辆类型",
                            //     width: "10%",
                            //     align: "center"
                            // }, 
                            {
                                field: "companyName",
                                title: "客户",
                                width: "35%",
                                align: "center",
                            }, {
                                field: "deliveryTime",
                                title: "交付时间",
                                width: "10%",
                                align: "center",
                                templet: function(d) {
                                    return d.deliveryTime.substring(0, 10)
                                },
                            }, {
                                field: "status",
                                title: "状态",
                                width: "15%",
                                align: "center",
                                templet: "#status"
                            }, {
                                fixed: "right",
                                title: "操作",
                                width: "30%",
                                align: "center",
                                toolbar: "#table-useradmin-admin"
                            }
                        ],
                    ],
                });

            }
            //新增
            var active = {
                add: function() {
                    console.log("aa")
                    admin.popup({
                        title: '新增公司信息',
                        area: ['50%', '95%'],
                        id: 'layuiadmin-form-userform',
                        success: function(layero, index) {
                            view(this.id).render('comment/form').done(function() {
                                form.render(null, 'layuiadmin-form-userform');
                                layui.laydate.render({
                                    type: 'datetime',
                                    elem: '#deliveryTime' //指定元素
                                });
                                layui.laydate.render({
                                    type: 'datetime',
                                    elem: '#time' //指定元素
                                });
                                //监听提交
                                form.on('submit(LAY-user-back-submit)', function(data) {
                                    var field = data.field; //获取提交的字段
                                    //新增用户信息  
                                    admin.req({
                                        url: setter.request.baseUrl + "/agv-info/add",
                                        data: JSON.stringify({
                                            'agvId': parseInt(field.agvId),
                                            'companyId': parseInt(field.companyId),
                                            'ctrlHardwareVersion': field.ctrlHardwareVersion,
                                            'ctrlSoftwareVersion': field.ctrlSoftwareVersion,
                                            'ctrlId': parseInt(field.ctrlId),
                                            'deliveryTime': field.deliveryTime,
                                            'hardwareVersion': field.hardwareVersion,
                                            'softwareVersion': field.softwareVersion,
                                            'status': parseInt(field.status),
                                            'time': field.time,
                                            'type': parseInt(field.type),
                                            'companyName': parseInt(field.companyName)
                                        }),
                                        type: "POST",
                                        dataType: "json",
                                        contentType: "application/json;charset=UTF-8",

                                        done: function(res) {
                                            console.log('新增', res);
                                            layui.table.reload('table-instance'); //重载表格
                                            layer.close(index); //执行关闭 
                                            layer.msg(res.msg);
                                        },

                                    });
                                });
                            });
                        }
                    });
                }
            };
            $('.layui-btn.layuiadmin-btn-admin').on('click', function() {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
            form.on('submit(uploadImg)', function(data) {
                window.open(setter.request.baseUrl + "agv-info/export");
            });

            table.on("tool(table-instance)", function(obj) {
                var data = obj.data;
                if (obj.event === "del") {
                    layer.confirm("真的删除么", function(index) {
                        delcommentHandle({
                            id: data.id,
                        });
                        obj.del();
                        layer.close(index);
                    })
                } else if (obj.event === "edit") {
                    admin.popup({
                        title: "编辑车辆信息",
                        area: ['50%', '95%'],
                        success: function(layero, index) {
                            view(this.id)
                                .render("comment/children", data)
                                .done(function() {
                                    layui.laydate.render({
                                        type: 'datetime',
                                        elem: '#deliveryTime' //指定元素
                                    });
                                    layui.laydate.render({
                                        type: 'datetime',
                                        elem: '#time' //指定元素
                                    });
                                    let _data = data;
                                    form.render(null, "layuiadmin-form-admin");
                                    form.on('submit(LAY-user-back-submit)', function(data) {
                                        var field = data.field;

                                        editmessageHandle(Object.assign(_data, field));
                                        layui.table.reload('LAY-user-back-manage'); //重载表格
                                        layer.close(index);

                                    });
                                });
                        },
                    });
                } else if (obj.event === "chakan") {
                    admin.popup({
                        title: "查看车辆详情",
                        area: ['50%', '95%'],
                        success: function(layero, index) {
                            view(this.id)
                                .render("comment/dmform", data)
                                .done(function() {
                                    let _data = data;
                                    form.render(null, "layuiadmin-form-admin");
                                    form.on('submit(LAY-user-back-submit)', function(data) {
                                        var field = data.field;

                                        editmessageHandle(Object.assign(_data, field));
                                        layui.table.reload('LAY-user-back-manage'); //重载表格
                                        layer.close(index);
                                    });
                                });
                        },
                    });
                }
            });

            //删除
            function delcommentHandle(params) {
                admin.req({
                    url: setter.request.baseUrl + "agv-info/soft-delete",
                    data: JSON.stringify({
                        idList: [params.id]
                    }),
                    headers: {
                        'content-type': 'application/json',
                    },
                    type: "POST",
                    done: function(res) {
                        layer.msg(res.msg);
                    },
                });
            }

            //修改编辑
            function editmessageHandle(params) {
                admin.req({
                    url: setter.request.baseUrl + "agv-info/update",
                    data: JSON.stringify(params),
                    type: "post",
                    dataType: "json",
                    contentType: "application/json",
                    done: function(res) {
                        layui.table.reload("table-instance");
                        layer.msg(res.msg);
                    },
                });
            }

            $('.layui-btn.layuiadmin-btn-useradmin').on('click', function() {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
            $("#id").click(function() {
                $('.one').css('display', 'none')
            })
        });
    </script>
    <script type="text/html" id="status">
        {{# if(d.status ==0){}} {{# return '正常使用'}} {{# } }} {{# if(d.status ==1){}} {{# return '故障状态'}} {{# } }} {{# if(d.status ==2){}} {{# return '生命周期结束'}} {{# } }}

    </script>